<template>
    <view>
        <!-- pages/registeredsuccessfully/index.wxml -->
        <view>
            <view v-if="show === 1" class="flexbox">
                <view class="c-r" @tap.stop.prevent="toNext">跳过</view>
                <view class="mt-40">
                    <image class="registerimg" :src="imgUrl + 'register1.png'"></image>
                    <view class="thank">感谢您选择意约</view>
                    <view class="c-l">
                        现在在填写推荐人邀请人推荐吗，即可获得
                        <text>50积分</text>
                        和价值
                        <text>520元</text>
                        的大礼包奖励哦~
                    </view>
                </view>
                <view class="Invitation">
                    <text>邀请码：</text>
                    <view class="weui-cell weui-cell_input">
                        <input class="weui-input" auto-focus placeholder="选填" @input="bindKeyInput" />
                    </view>
                </view>
                <view class="subbtm" @tap="onSubmitcode">提交</view>
            </view>
            <view v-if="show === 2" class="flexbox">
                <view class="mt-106">
                    <image class="registerimg" :src="imgUrl + 'register2.png'"></image>
                    <view class="thank">恭喜你！</view>
                    <view class="c-l c-c">
                        <text>50积分</text>
                        已放入您的意约钱包
                    </view>
                </view>
                <view class="subbtm mt-120" @tap="toMy">确定</view>
            </view>
        </view>
        <tabbar activeIdx="3"></tabbar>
    </view>
</template>

<script>
// pages/registeredsuccessfully/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            show: 1,
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            code: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 获取邀请码
        bindKeyInput(e) {
            const { value } = e.detail;
            this.setData({
                code: value
            });
        },

        // 提交
        onSubmitcode() {
            _request
                .postObj('/recomUser/bindInviteCode', {
                    userId: uni.getStorageSync('userid'),
                    invitecode: this.code
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            show: 2
                        });
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },

        // 切换盒子2
        toNext() {
            this.setData({
                show: 2
            });
        },

        // 前往首页
        toMy() {
            uni.switchTab({
                url: '/firstpages/my/index'
            });
        }
    }
};
</script>
<style>
/* pages/registeredsuccessfully/index.wxss */
/* 盒子1 */
.flexbox {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin: 0 40rpx;
    width: 670rpx;
    justify-content: center;
}

.c-l {
    width: 522rpx;
    text-align: left;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    margin: 0 auto;
}

.c-r {
    text-align: right;
    width: 100%;
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
}

.thank {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    margin: 50rpx 0 20rpx 0;
}

.Invitation {
    width: 670rpx;
    height: 88rpx;
    border-radius: 42rpx;
    border: 1px solid #ff8722;
    text-align: left;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 88rpx;
    display: flex;
    align-items: center;
    padding-left: 52rpx;
    margin: 86rpx 0 80rpx 0;
}

.Invitation > text:nth-child(1) {
    color: #ff8722;
}

.c-l > text {
    color: #ff8722;
}

.subbtm {
    width: 670rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 21px;
    line-height: 88rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
}

.registerimg {
    width: 332rpx;
    height: 182rpx;
}

/* 盒子2 */

.c-c {
    text-align: center;
}

.mt-106 {
    margin-top: 106rpx;
}
</style>
